<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>图片展示-鼠标移入显示详细信息</title>
    <style>
        div, ul, li, dl, dt, dd, img, a {
            margin: 0;
            padding: 0;
        }

        ul, li, dl, dt, dd {
            list-style: none;
        }

        img {
            border: 0;
            width: 300px;
        }

        .demo {
            margin: 0 auto;
            overflow: hidden;
            padding: 0 34px;
        }

        .orginImg li {
            float: left;
            margin-right: 5px;
            position: relative;
            margin-bottom: 10px;
        }

        .orginImg li a {
            display: block;
            border: 2px solid #ccc;
        }

        .orginImg li div {
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 22;
            background: #ccc;
            width: 305px;
            height: 170px;
            border: 2px solid #F00;
            display: none;
        }

        .orginImg li div dl {
            color: #fff;
            font-weight: bold;
            padding: 10px;
        }

        .orginImg li div dl dt {
            text-align: center;
        }

        .orginImg li div dl dd {
            text-indent: 2em;
        }
    </style>
</head>

<body>
<div class="demo">
    <ul class="orginImg" id="orginImg">
        <li>
            <a href="http://imooc.com"><img src="1.jpg"/></a>
            <div>
                <dl>
                    <dt>学会html5 绝对的屌丝逆袭</dt>
                    <dd>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</dd>
                </dl>
            </div>
        </li>
        <li>
            <a href="http://imooc.com"><img src="2.jpg"/></a>
            <div>
                <dl>
                    <dt>圆角水晶按钮制作</dt>
                    <dd>网页中的圆角按钮和宽度自适应按钮就这么轻松制作</dd>
                </dl>
            </div>
        </li>
        <li>
            <a href="http://imooc.com"><img src="3.jpg"/></a>
            <div>
                <dl>
                    <dt>导航条菜单的制作</dt>
                    <dd>30分钟教你轻松制作出各种形式的网站导航条菜单</dd>
                </dl>
            </div>
        </li>
    </ul>
</div>
<script>
    var lis = document.getElementById("orginImg").getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = showDetail;
        lis[i].onmouseout = hideDetail;
    }
    var lastLi;
    lastLi = lis[lis.length - 1];
    lastLi.getElementsByTagName("div")[0].style.left = 'auto';
    lastLi.getElementsByTagName("div")[0].style.right = '100%';

    function showDetail() {
        this.getElementsByTagName("div")[0].style.display = 'block';
    }

    function hideDetail() {
        this.getElementsByTagName("div")[0].style.display = 'none';
    }
</script>
</body>
</html>
